<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet"
          integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
</head>
<body>
<table class="table table-striped">
    <thead>
    <tr>
        <th scope="col">编号</th>
        <th>姓名</th>
        <th>职位</th>
        <th>上司ID</th>
        <th>入职时间</th>
        <th>工资</th>
        <th>奖金</th>
        <th>部门</th>
    </tr>
    </thead>
    <tbody id="tbody">

    </tbody>
    <tfoot>
    <tr>
        <th colspan="8">
            <nav aria-label="Page navigation example">
                <ul class="pagination justify-content-center" id="pagination">
                </ul>
            </nav>
        </th>
    </tr>
    </tfoot>
</table>
</body>
</html>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"
        integrity="sha384-s1swLUYcLBqAXHj7nWZcBD03oDfaVT4TaOQEaQGnSa65SsyckDHTlfGcB8+LOLkz"
        crossorigin="anonymous"></script>
<script>
    let data = [
        {
            "empno": 7369,
            "ename": "SMITH",
            "job": "CLERK",
            "mgr": 7902,
            "hiredate": "1980-12-17",
            "sal": 800.0,
            "comm": null,
            "deptno": 20
        },
        {
            "empno": 7499,
            "ename": "ALLEN",
            "job": "SALESMAN",
            "mgr": 7698,
            "hiredate": "1981-2-19",
            "sal": 1600.0,
            "comm": 300.0,
            "deptno": 30
        },
        {
            "empno": 7521,
            "ename": "WARD1",
            "job": "MANAGER",
            "mgr": 7566,
            "hiredate": "1981-2-28",
            "sal": 9788.0,
            "comm": 500.0,
            "deptno": 30
        },
        {
            "empno": 7566,
            "ename": "JONES",
            "job": "MANAGER",
            "mgr": 7839,
            "hiredate": "1981-4-2",
            "sal": 2976.0,
            "comm": null,
            "deptno": 20
        },
        {
            "empno": 7654,
            "ename": "MARTIN",
            "job": "SALESMAN",
            "mgr": 7698,
            "hiredate": "1981-9-28",
            "sal": 1250.0,
            "comm": 1400.0,
            "deptno": 30
        },
        {
            "empno": 7698,
            "ename": "BLAKE",
            "job": "MANAGER",
            "mgr": 7839,
            "hiredate": "1981-5-1",
            "sal": 2850.0,
            "comm": null,
            "deptno": 30
        },
        {
            "empno": 7782,
            "ename": "CLARK",
            "job": "MANAGER",
            "mgr": 7839,
            "hiredate": "1981-6-9",
            "sal": 4300.0,
            "comm": 200.0,
            "deptno": 10
        },
        {
            "empno": 7788,
            "ename": "SCOTT",
            "job": "ANALYST",
            "mgr": 7566,
            "hiredate": "1987-7-13",
            "sal": 3500.0,
            "comm": null,
            "deptno": 10
        },
        {
            "empno": 7839,
            "ename": "KING",
            "job": "PRESIDENT",
            "mgr": null,
            "hiredate": "1981-11-17",
            "sal": 5000.0,
            "comm": null,
            "deptno": 10
        },
        {
            "empno": 7844,
            "ename": "TURNER",
            "job": "SALESMAN",
            "mgr": 7698,
            "hiredate": "1981-9-8",
            "sal": 1500.0,
            "comm": 0.0,
            "deptno": 30
        },
        {
            "empno": 7876,
            "ename": "ADAMS",
            "job": "CLERK",
            "mgr": 7788,
            "hiredate": "1987-7-13",
            "sal": 1100.0,
            "comm": null,
            "deptno": 20
        },
        {
            "empno": 7900,
            "ename": "JAMES",
            "job": "CLERK",
            "mgr": 7698,
            "hiredate": "1981-12-3",
            "sal": 950.0,
            "comm": null,
            "deptno": 30
        },
        {
            "empno": 7902,
            "ename": "FORD",
            "job": "程序员",
            "mgr": 7844,
            "hiredate": "1981-12-3",
            "sal": 5230.0,
            "comm": 800.0,
            "deptno": 20
        },
        {
            "empno": 7903,
            "ename": "熊辉",
            "job": "页面设计",
            "mgr": 7369,
            "hiredate": "2022-6-6",
            "sal": 13456.0,
            "comm": 1980.0,
            "deptno": 30
        },
        {
            "empno": 7904,
            "ename": "刘万松",
            "job": "程序员",
            "mgr": 7940,
            "hiredate": "2022-6-15",
            "sal": 19800.0,
            "comm": 701.0,
            "deptno": 30
        },
        {
            "empno": 7905,
            "ename": "张三",
            "job": "健身教练",
            "mgr": 7937,
            "hiredate": "2022-6-15",
            "sal": 19800.0,
            "comm": 4500.0,
            "deptno": 30
        },
        {
            "empno": 7906,
            "ename": "马熙朝",
            "job": "页面设计",
            "mgr": 7936,
            "hiredate": "2024-9-8",
            "sal": 988.0,
            "comm": 200.0,
            "deptno": 20
        },
        {
            "empno": 7907,
            "ename": "张晓散",
            "job": "程序员",
            "mgr": 7788,
            "hiredate": "2024-9-8",
            "sal": 1988.0,
            "comm": 3400.0,
            "deptno": 10
        },
        {
            "empno": 7908,
            "ename": "方文山",
            "job": "歌手",
            "mgr": 7788,
            "hiredate": "2022-8-25",
            "sal": 4200.0,
            "comm": 1987.0,
            "deptno": 30
        },
        {
            "empno": 7909,
            "ename": "马三立",
            "job": "相声大师",
            "mgr": 7521,
            "hiredate": "2022-8-29",
            "sal": 14500.0,
            "comm": 7400.0,
            "deptno": 20
        },
        {
            "empno": 7910,
            "ename": "王浩江",
            "job": "程序员",
            "mgr": 7908,
            "hiredate": "2014-8-9",
            "sal": 9999.0,
            "comm": 1234.0,
            "deptno": 20
        },
        {
            "empno": 7934,
            "ename": "米勒",
            "job": "CLERK",
            "mgr": 7782,
            "hiredate": "1982-1-23",
            "sal": 1300.0,
            "comm": null,
            "deptno": 10
        },
        {
            "empno": 7935,
            "ename": "张三丰",
            "job": "MANAGER",
            "mgr": 7788,
            "hiredate": "2020-6-14",
            "sal": 9876.0,
            "comm": 3000.0,
            "deptno": 20
        },
        {
            "empno": 7936,
            "ename": "虞挺",
            "job": "程序员",
            "mgr": 7788,
            "hiredate": "2022-3-25",
            "sal": 80000.0,
            "comm": 3000.0,
            "deptno": 20
        },
        {
            "empno": 7937,
            "ename": "杜瑜杰",
            "job": "歌手",
            "mgr": 7566,
            "hiredate": "2022-3-1",
            "sal": 18888.80078125,
            "comm": 4300.0,
            "deptno": 30
        },
        {
            "empno": 7939,
            "ename": "张恒",
            "job": "程序员",
            "mgr": 7935,
            "hiredate": "2022-3-3",
            "sal": 8000.0,
            "comm": 3000.0,
            "deptno": 10
        },
        {
            "empno": 7940,
            "ename": "王玮琪",
            "job": "页面设计",
            "mgr": 7935,
            "hiredate": "2022-3-3",
            "sal": 9765.0,
            "comm": 11000.0,
            "deptno": 10
        },
        {
            "empno": 7941,
            "ename": "张鑫",
            "job": "检测人员",
            "mgr": 7839,
            "hiredate": "2022-4-6",
            "sal": 9010.0,
            "comm": 2000.0,
            "deptno": 20
        },
        {
            "empno": 7942,
            "ename": "杨颖",
            "job": "演员",
            "mgr": 7566,
            "hiredate": "2022-4-15",
            "sal": 13800.0,
            "comm": 21777.0,
            "deptno": 20
        },
        {
            "empno": 7943,
            "ename": "段卓越",
            "job": "程序员",
            "mgr": 7788,
            "hiredate": "2022-4-15",
            "sal": 9999.0,
            "comm": 4444.0,
            "deptno": 10
        },
        {
            "empno": 7944,
            "ename": "张明杰",
            "job": "程序员",
            "mgr": 7782,
            "hiredate": "2022-4-15",
            "sal": 10001.0,
            "comm": 3333.0,
            "deptno": 10
        },
        {
            "empno": 7945,
            "ename": "陈丹丹",
            "job": "程序员",
            "mgr": 7566,
            "hiredate": "2022-4-19",
            "sal": 7566.0,
            "comm": 7566.0,
            "deptno": 10
        },
        {
            "empno": 7946,
            "ename": "董甜甜",
            "job": "MANAGER",
            "mgr": 7876,
            "hiredate": "2022-4-12",
            "sal": 9998.0,
            "comm": 3456.0,
            "deptno": 30
        },
        {
            "empno": 7947,
            "ename": "秋一凡",
            "job": "PRESIDENT",
            "mgr": 7935,
            "hiredate": "2022-3-28",
            "sal": 11988.0,
            "comm": 2366.0,
            "deptno": 40
        },
        {
            "empno": 7949,
            "ename": "周杰伦",
            "job": "SALESMAN",
            "mgr": 7521,
            "hiredate": "2022-5-9",
            "sal": 22.0,
            "comm": 33.0,
            "deptno": 20
        },
        {
            "empno": 7951,
            "ename": "刘耕宏",
            "job": "健身教练",
            "mgr": 7788,
            "hiredate": "2022-5-10",
            "sal": 19800.0,
            "comm": 7000.0,
            "deptno": 10
        },
        {
            "empno": 7952,
            "ename": "王化楠",
            "job": "程序员",
            "mgr": 7788,
            "hiredate": "2022-11-3",
            "sal": 9876.0,
            "comm": 6789.0,
            "deptno": 20
        },
        {
            "empno": 7953,
            "ename": "邓欢欢",
            "job": "页面设计",
            "mgr": 7788,
            "hiredate": "2022-11-3",
            "sal": 9999.0,
            "comm": 3333.0,
            "deptno": 20
        },
        {
            "empno": 7954,
            "ename": "郑若琳",
            "job": "SALESMAN",
            "mgr": 7369,
            "hiredate": "2022-11-3",
            "sal": 13800.0,
            "comm": 99.0,
            "deptno": 30
        },
        {
            "empno": 7955,
            "ename": "张彤",
            "job": "程序员",
            "mgr": 7566,
            "hiredate": "2022-11-4",
            "sal": 9876.0,
            "comm": 56789.0,
            "deptno": 20
        },
        {
            "empno": 7956,
            "ename": "张力士",
            "job": "健身教练",
            "mgr": 7905,
            "hiredate": "2011-8-9",
            "sal": 6666.7998046875,
            "comm": 789.0,
            "deptno": 30
        },
        {
            "empno": 7957,
            "ename": "董杭",
            "job": "页面设计",
            "mgr": 7788,
            "hiredate": "2023-4-1",
            "sal": 6800.0,
            "comm": 300.0,
            "deptno": 20
        },
        {
            "empno": 7958,
            "ename": "付志杰",
            "job": "歌手",
            "mgr": 7910,
            "hiredate": "2023-4-1",
            "sal": 8900.0,
            "comm": 888.0,
            "deptno": 40
        },
        {
            "empno": 7960,
            "ename": "张毛",
            "job": "歌手",
            "mgr": 7566,
            "hiredate": "2023-4-14",
            "sal": 12000.0,
            "comm": 3450.0,
            "deptno": 20
        },
        {
            "empno": 7962,
            "ename": "武路路",
            "job": "程序员",
            "mgr": 7936,
            "hiredate": "2023-4-21",
            "sal": 7890.0,
            "comm": 123.0,
            "deptno": 10
        },
        {
            "empno": 7963,
            "ename": "赵国强",
            "job": "程序员",
            "mgr": 7788,
            "hiredate": "2023-4-21",
            "sal": 9800.0,
            "comm": 300.0,
            "deptno": 20
        },
        {
            "empno": 7966,
            "ename": "李思前",
            "job": "ANALYST",
            "mgr": 7654,
            "hiredate": "2023-5-4",
            "sal": 9999.900390625,
            "comm": 200.0,
            "deptno": 30
        },
        {
            "empno": 7967,
            "ename": "李唯佳",
            "job": "歌手",
            "mgr": 7966,
            "hiredate": "2019-4-15",
            "sal": 19800.0,
            "comm": 100.0,
            "deptno": 20
        },
        {
            "empno": 7969,
            "ename": "张雪",
            "job": "ANALYST",
            "mgr": 7878,
            "hiredate": "2023-8-1",
            "sal": 19000.0,
            "comm": 67.0,
            "deptno": 20
        },
        {
            "empno": 7971,
            "ename": "沈坤",
            "job": "程序员",
            "mgr": 7878,
            "hiredate": "2023-8-1",
            "sal": 9000.0,
            "comm": null,
            "deptno": 20
        },
        {
            "empno": 7972,
            "ename": "董雪",
            "job": "ANALYST",
            "mgr": 7782,
            "hiredate": "2023-6-11",
            "sal": 12900.0,
            "comm": 100.0,
            "deptno": 30
        },
        {
            "empno": 7973,
            "ename": "葛心媛",
            "job": "程序员",
            "mgr": 7788,
            "hiredate": "2023-7-29",
            "sal": 3000.0,
            "comm": 7800.0,
            "deptno": 30
        },
        {
            "empno": 7974,
            "ename": "周国豪",
            "job": "页面设计",
            "mgr": null,
            "hiredate": null,
            "sal": 9999.0,
            "comm": null,
            "deptno": 20
        },
        {
            "empno": 7976,
            "ename": "赵佳旺",
            "job": "页面设计",
            "mgr": null,
            "hiredate": "2023-8-1",
            "sal": 9999.0,
            "comm": null,
            "deptno": 20
        },
        {
            "empno": 7977,
            "ename": "屈鹏飞",
            "job": "程序员",
            "mgr": 7566,
            "hiredate": null,
            "sal": 9999.0,
            "comm": null,
            "deptno": 20
        },
        {
            "empno": 7979,
            "ename": "张小五",
            "job": "程序员",
            "mgr": 7788,
            "hiredate": "2023-9-19",
            "sal": 9999.0,
            "comm": 89.0,
            "deptno": 20
        },
        {
            "empno": 7980,
            "ename": "耿杨博",
            "job": "ANALYST",
            "mgr": 7654,
            "hiredate": "2023-9-22",
            "sal": 9999.0,
            "comm": 111.0,
            "deptno": 30
        },
        {
            "empno": 7982,
            "ename": "彭晓瑞",
            "job": "MANAGER",
            "mgr": 7654,
            "hiredate": "2023-9-22",
            "sal": 3333.0,
            "comm": 333.0,
            "deptno": 20
        },
        {
            "empno": 7983,
            "ename": "文卓昊",
            "job": "MANAGER",
            "mgr": 7698,
            "hiredate": "2023-9-22",
            "sal": 3333.0,
            "comm": 3333.0,
            "deptno": 30
        },
        {
            "empno": 7984,
            "ename": "姚雄飞",
            "job": "页面设计",
            "mgr": 7499,
            "hiredate": "2023-9-22",
            "sal": 3333.0,
            "comm": 2221.0,
            "deptno": 40
        },
        {
            "empno": 7988,
            "ename": "张栋豪",
            "job": "歌手",
            "mgr": 7982,
            "hiredate": "2023-9-25",
            "sal": 9999.900390625,
            "comm": null,
            "deptno": 20
        },
        {
            "empno": 7990,
            "ename": "杨路强",
            "job": "健身教练",
            "mgr": 7956,
            "hiredate": "2017-2-15",
            "sal": 7777.0,
            "comm": 100.0,
            "deptno": 40
        },
        {
            "empno": 7992,
            "ename": "卢东东",
            "job": "页面设计",
            "mgr": 7990,
            "hiredate": "2023-12-10",
            "sal": 9978.7998046875,
            "comm": 879.0,
            "deptno": 10
        },
        {
            "empno": 7996,
            "ename": "代常瑞",
            "job": "歌手",
            "mgr": 7788,
            "hiredate": "2023-12-9",
            "sal": 3800.0,
            "comm": 200.0,
            "deptno": 20
        },
        {
            "empno": 7997,
            "ename": "李泽阳",
            "job": "程序员",
            "mgr": 7994,
            "hiredate": "2023-12-9",
            "sal": 3900.0,
            "comm": 180.0,
            "deptno": 10
        },
        {
            "empno": 7998,
            "ename": "牛博",
            "job": "MANAGER",
            "mgr": 7566,
            "hiredate": "2023-12-9",
            "sal": 6789.0,
            "comm": 1234.0,
            "deptno": 30
        },
        {
            "empno": 7999,
            "ename": "卢杨杰",
            "job": "程序员",
            "mgr": 7954,
            "hiredate": "2023-12-9",
            "sal": 5678.0,
            "comm": 777.0,
            "deptno": 10
        },
        {
            "empno": 8000,
            "ename": "李永康",
            "job": "相声大师",
            "mgr": 7906,
            "hiredate": "2023-12-10",
            "sal": 9800.0,
            "comm": 300.0,
            "deptno": 40
        },
        {
            "empno": 8001,
            "ename": "方泽阳",
            "job": "程序员",
            "mgr": 7983,
            "hiredate": "2024-1-21",
            "sal": 23000.0,
            "comm": 100.0,
            "deptno": 20
        },
        {
            "empno": 8005,
            "ename": "张三四",
            "job": "程序员",
            "mgr": 7788,
            "hiredate": "2024-2-3",
            "sal": 7896.0,
            "comm": 999.0,
            "deptno": 30
        },
        {
            "empno": 8006,
            "ename": "杜平",
            "job": "MANAGER",
            "mgr": 7521,
            "hiredate": "2024-2-22",
            "sal": 10080.0,
            "comm": 1023.0,
            "deptno": 20
        },
        {
            "empno": 8010,
            "ename": "舒龙华",
            "job": "程序员",
            "mgr": 7965,
            "hiredate": "2024-2-27",
            "sal": 9090.0,
            "comm": 999.0,
            "deptno": 10
        },
        {
            "empno": 8011,
            "ename": "马兴贵",
            "job": "程序员",
            "mgr": 7566,
            "hiredate": null,
            "sal": 9800.0,
            "comm": 900.0,
            "deptno": 20
        },
        {
            "empno": 8013,
            "ename": "张三五",
            "job": "程序员",
            "mgr": 7566,
            "hiredate": "2024-3-4",
            "sal": 7777.0,
            "comm": 900.0,
            "deptno": 20
        },
        {
            "empno": 8014,
            "ename": "闫帅",
            "job": "歌手",
            "mgr": 7677,
            "hiredate": "2024-3-4",
            "sal": 9998.0,
            "comm": 200.0,
            "deptno": 20
        },
        {
            "empno": 8016,
            "ename": "刘飞",
            "job": "歌手",
            "mgr": 7964,
            "hiredate": "2024-3-9",
            "sal": 7988.0,
            "comm": 123.0,
            "deptno": 10
        },
        {
            "empno": 8018,
            "ename": "张博文",
            "job": "程序员",
            "mgr": 7987,
            "hiredate": "2024-3-16",
            "sal": 9876.900390625,
            "comm": 999.0,
            "deptno": 30
        },
        {
            "empno": 8020,
            "ename": "丁春博",
            "job": "程序员",
            "mgr": 8019,
            "hiredate": "2024-10-8",
            "sal": 9876.0,
            "comm": 980.0,
            "deptno": 10
        },
        {
            "empno": 8021,
            "ename": "罗志豪",
            "job": "程序员",
            "mgr": 8787,
            "hiredate": "2011-1-1",
            "sal": 9876.0,
            "comm": 980.0,
            "deptno": 10
        },
        {
            "empno": 8022,
            "ename": "郝佳怡",
            "job": "程序员",
            "mgr": 8787,
            "hiredate": "2024-3-24",
            "sal": 9876.0,
            "comm": 980.0,
            "deptno": 10
        },
        {
            "empno": 8024,
            "ename": "李大叔",
            "job": "程序员",
            "mgr": 7896,
            "hiredate": "2024-6-14",
            "sal": 9989.900390625,
            "comm": 300.0,
            "deptno": 30
        },
        {
            "empno": 8025,
            "ename": "张小叔",
            "job": "程序员",
            "mgr": 7896,
            "hiredate": "2024-6-14",
            "sal": 9989.900390625,
            "comm": 300.0,
            "deptno": 20
        },
        {
            "empno": 8030,
            "ename": "魏力彤",
            "job": "网页设计",
            "mgr": 7988,
            "hiredate": "2024-8-12",
            "sal": 8978.0,
            "comm": 809.0,
            "deptno": 20
        },
        {
            "empno": 8032,
            "ename": "尹玉文",
            "job": "页面设计",
            "mgr": 8006,
            "hiredate": "2024-8-13",
            "sal": 91765.8984375,
            "comm": 98.0,
            "deptno": 30
        },
        {
            "empno": 8033,
            "ename": "吴志晖",
            "job": "程序员",
            "mgr": 7988,
            "hiredate": "2024-8-14",
            "sal": 9999.900390625,
            "comm": null,
            "deptno": 30
        },
        {
            "empno": 8034,
            "ename": "马三思",
            "job": "程序员",
            "mgr": 9876,
            "hiredate": null,
            "sal": 9898.0,
            "comm": null,
            "deptno": 20
        },
        {
            "empno": 8035,
            "ename": "李三思3",
            "job": null,
            "mgr": null,
            "hiredate": "2024-8-15",
            "sal": null,
            "comm": null,
            "deptno": null
        },
        {
            "empno": 8036,
            "ename": "李三思",
            "job": "程序员",
            "mgr": 9876,
            "hiredate": "2024-8-15",
            "sal": 9898.0,
            "comm": null,
            "deptno": 20
        },
        {
            "empno": 8038,
            "ename": "张三思3",
            "job": "程序员",
            "mgr": 9876,
            "hiredate": "2024-8-15",
            "sal": 9898.0,
            "comm": null,
            "deptno": 20
        },
        {
            "empno": 8039,
            "ename": "白蓉",
            "job": "程序员",
            "mgr": 8025,
            "hiredate": "2024-9-7",
            "sal": 19999.900390625,
            "comm": 9087.0,
            "deptno": 20
        },
        {
            "empno": 8040,
            "ename": "闫朴泽",
            "job": "歌手",
            "mgr": 8026,
            "hiredate": "2024-9-8",
            "sal": 9898.0,
            "comm": 89898.0,
            "deptno": 30
        },
        {
            "empno": 8041,
            "ename": "闫朴泽1",
            "job": "程序员",
            "mgr": 8026,
            "hiredate": "2024-9-8",
            "sal": 9898.0,
            "comm": 9876.0,
            "deptno": 30
        },
        {
            "empno": 8043,
            "ename": "李大山",
            "job": "歌手",
            "mgr": 8041,
            "hiredate": "2024-9-25",
            "sal": 9908.900390625,
            "comm": 9999.0,
            "deptno": 30
        },
        {
            "empno": 8044,
            "ename": "小黑土",
            "job": "农业工作者",
            "mgr": 7788,
            "hiredate": "2024-9-26",
            "sal": 9999.900390625,
            "comm": 987.0,
            "deptno": 10
        },
        {
            "empno": 8046,
            "ename": "马铭御",
            "job": "程序员",
            "mgr": 8041,
            "hiredate": null,
            "sal": 9879.900390625,
            "comm": 8909.0,
            "deptno": 30
        },
        {
            "empno": 8047,
            "ename": "李大白2",
            "job": "程序员",
            "mgr": null,
            "hiredate": "2024-10-8",
            "sal": 9879.900390625,
            "comm": 8909.0,
            "deptno": null
        },
        {
            "empno": 8048,
            "ename": "李晓武",
            "job": "PRESIDENT",
            "mgr": 7788,
            "hiredate": null,
            "sal": 9800.0,
            "comm": 999.0,
            "deptno": null
        },
        {
            "empno": 8049,
            "ename": "李晓起",
            "job": "PRESIDENT",
            "mgr": 7566,
            "hiredate": "2024-10-8",
            "sal": 5664.0,
            "comm": 3434.0,
            "deptno": null
        },
        {
            "empno": 8050,
            "ename": "夏旭辉",
            "job": "页面设计",
            "mgr": 7989,
            "hiredate": "2024-11-3",
            "sal": 7898.0,
            "comm": 987.9000244140625,
            "deptno": 20
        },
        {
            "empno": 8051,
            "ename": "高恒茂",
            "job": "程序员",
            "mgr": 8877,
            "hiredate": null,
            "sal": 8798.0,
            "comm": 999.0,
            "deptno": 20
        },
        {
            "empno": 8052,
            "ename": "王琳桃",
            "job": "程序员",
            "mgr": 8877,
            "hiredate": null,
            "sal": 8798.0,
            "comm": 999.0,
            "deptno": 20
        },
        {
            "empno": 8053,
            "ename": "管奕华",
            "job": "程序员",
            "mgr": 8877,
            "hiredate": null,
            "sal": 8798.0,
            "comm": 999.0,
            "deptno": 20
        },
        {
            "empno": 8054,
            "ename": "党佳祺",
            "job": "程序员",
            "mgr": 8877,
            "hiredate": null,
            "sal": 8798.0,
            "comm": 999.0,
            "deptno": 20
        },
        {
            "empno": 8055,
            "ename": "赫宝宝",
            "job": "程序员",
            "mgr": 5,
            "hiredate": null,
            "sal": 8000.0,
            "comm": 3000.0,
            "deptno": null
        },
        {
            "empno": 8056,
            "ename": "邱紫坪",
            "job": "动漫评论员",
            "mgr": null,
            "hiredate": null,
            "sal": 6000.0,
            "comm": 10000.0,
            "deptno": null
        },
        {
            "empno": 8057,
            "ename": "谢苗",
            "job": "程序员",
            "mgr": 1,
            "hiredate": null,
            "sal": 9000.0,
            "comm": 3000.0,
            "deptno": null
        },
        {
            "empno": 8058,
            "ename": "王卓飞",
            "job": "人工智能",
            "mgr": 8051,
            "hiredate": "2025-5-17",
            "sal": 9999.0,
            "comm": 222.0,
            "deptno": 30
        },
        {
            "empno": 8061,
            "ename": "马浩伟",
            "job": "人工智能",
            "mgr": 8051,
            "hiredate": "2025-5-17",
            "sal": 9999.0,
            "comm": 222.0,
            "deptno": 30
        },
        {
            "empno": 8062,
            "ename": "欧阳潘达",
            "job": "程序员",
            "mgr": 8099,
            "hiredate": "2025-5-17",
            "sal": 7888.0,
            "comm": 999.0,
            "deptno": 30
        },
        {
            "empno": 8063,
            "ename": "祁琳菲",
            "job": "程序员",
            "mgr": 9089,
            "hiredate": "2025-5-17",
            "sal": 89867.0,
            "comm": 87.0,
            "deptno": 10
        }
    ]
    let total; // 总条数
    let pages; // 总页数
    let nowPage; // 当前页
    function loadData(page) {
        if (page === -1) {
            page = nowPage - 1;
        }
        if (page === -2) {
            page = nowPage + 1;
        }
        if (page < 1) {
            return;
        }
        if (page > pages) {
            return;
        }
        nowPage = page;
        console.log(nowPage);
        // 分页高亮
        let allA = document.getElementsByTagName('a');
        let selectA = allA[page];
        // 遍历所有的a标签，把所有的a标签的class属性值设置为page-item
        for (let i = 0; i < allA.length; i++) {
            allA[i].parentElement.setAttribute('class', 'page-item')
        }
        // 当前页高亮
        selectA.parentElement.setAttribute('class', 'page-item active');


        let start = (page - 1) * 10;
        let end = page * 10;
        let tbody = document.getElementById('tbody');
        tbody.innerHTML = '';
        for (let i = start; i < end; i++) {
            let obj = data[i];
            let tr = document.createElement('tr');
            let td1 = document.createElement('td');
            let td2 = document.createElement('td');
            let td3 = document.createElement('td');
            let td4 = document.createElement('td');
            let td5 = document.createElement('td');
            let td6 = document.createElement('td');
            let td7 = document.createElement('td');
            let td8 = document.createElement('td');
            td1.innerText = obj.empno;
            td2.innerText = obj.ename;
            td3.innerText = obj.job;
            td4.innerText = obj.mgr;
            td5.innerText = obj.hiredate;
            td6.innerText = obj.sal;
            td7.innerText = obj.comm;
            td8.innerText = obj.deptno;

            tr.appendChild(td1);
            tr.appendChild(td2);
            tr.appendChild(td3);
            tr.appendChild(td4);
            tr.appendChild(td5);
            tr.appendChild(td6);
            tr.appendChild(td7);
            tr.appendChild(td8);
            tbody.appendChild(tr);
        }
    }

    //  <li class="page-item"><a class="page-link" href="#">上一页</a></li>
    function changePage() {
        let paginationObj = document.getElementById('pagination');
        let liPrevObj = document.createElement('li');
        liPrevObj.setAttribute('class', 'page-item')
        liPrevObj.innerHTML = '<a class="page-link" href="#" onclick="loadData(' + (-1) + ')">上一页</a>';
        paginationObj.appendChild(liPrevObj);
        for (let i = 0; i < pages; i++) {
            let liObj = document.createElement('li');
            if (i === 0) {
                liObj.setAttribute('class', 'page-item active');
            } else {
                liObj.setAttribute('class', 'page-item')
            }
            liObj.innerHTML = '<a class="page-link" href="#" onclick="loadData(' + (i + 1) + ')">' + (i + 1) + '</a>';
            paginationObj.appendChild(liObj);
        }
        let liNextObj = document.createElement('li');
        liNextObj.setAttribute('class', 'page-item')
        liNextObj.innerHTML = '<a class="page-link" href="#" onclick="loadData(' + (-2) + ')">下一页</a>';
        paginationObj.appendChild(liNextObj);

    }

    onload = function () {
        total = data.length;
        pages = Math.ceil(data.length / 10);
        changePage()
        loadData(1)
    }
</script>